<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GanLing-Guitar-on-HTML</title>
		<style>
			div{height:20px; display:inline-block}
		</style>
	</head>
	<body style="background-color: rgb(200,200,200);"; onload="getScreen()">
		
		<p id="disp_position_l">Position Left  : 2</p>
		<p id="disp_position_r">Position Right : 4</p>
		<p id="disp_shift_r">Shift Right : 0</p>
		<p id="disp_tone">Tone : 0</p>
		
 
		<script>
		var position_l = 2;
		var position_r = 4;
		var shift_r = 0;
		var tone = 0;
		// 当文档加载完成后绑定事件
		document.addEventListener('DOMContentLoaded', function() {
			// 监听键盘按键事件
			document.addEventListener('keydown', function(event) {
				if (event.key === 'q') {position_l = position_l - 1; display_();}
				if (event.key === 'w') {position_l = position_l + 1; display_();}
				if (event.key === '+') {position_r = position_r - 1; display_();}
				if (event.key === '-') {position_r = position_r + 1; display_();}
				if (event.key === 'ArrowLeft')  {tone = tone - 1; display_();}
				if (event.key === 'ArrowRight') {tone = tone + 1; display_();}
				if (event.key === 'Enter') {
					if (shift_r === 0) {shift_r = 1; display_();}
					else if (shift_r === 1) {shift_r = 0; display_();}
				}
				
				if (event.key === 'Shift') {playAudio(tone + 12 ,position_l - 1);}
				if (event.key === 'z' || event.key === 'Z') {playAudio(tone + 1 ,position_l + 0);}
				if (event.key === 's' || event.key === 'S') {playAudio(tone + 2 ,position_l + 0);}
				if (event.key === 'x' || event.key === 'X') {playAudio(tone + 3 ,position_l + 0);}
				if (event.key === 'd' || event.key === 'D') {playAudio(tone + 4 ,position_l + 0);}
				if (event.key === 'c' || event.key === 'C') {playAudio(tone + 5 ,position_l + 0);}
				if (event.key === 'v' || event.key === 'V') {playAudio(tone + 6 ,position_l + 0);}
				if (event.key === 'g' || event.key === 'G') {playAudio(tone + 7 ,position_l + 0);}
				if (event.key === 'b' || event.key === 'B') {playAudio(tone + 8 ,position_l + 0);}
				if (event.key === 'h' || event.key === 'H') {playAudio(tone + 9 ,position_l + 0);}
				if (event.key === 'n' || event.key === 'N') {playAudio(tone + 10,position_l + 0);}
				if (event.key === 'j' || event.key === 'J') {playAudio(tone + 11,position_l + 0);}
				if (event.key === 'm' || event.key === 'M') {playAudio(tone + 12,position_l + 0);}
				if (event.key === ',' || event.key === '<') {playAudio(tone + 1 ,position_l + 1);}
				if (event.key === 'l' || event.key === 'L') {playAudio(tone + 2 ,position_l + 1);}
				if (event.key === '.' || event.key === '>') {playAudio(tone + 3 ,position_l + 1);}
				if (event.key === ';' || event.key === ':') {playAudio(tone + 4 ,position_l + 1);}
				if (event.key === '/' || event.key === '?') {playAudio(tone + 5 ,position_l + 1);}
				if (event.key === '\''|| event.key === '"') {playAudio(tone + 6 ,position_l + 1);}
				if (event.key === '[' || event.key === '{') {playAudio(tone + 7 ,position_l + 1);}
				if (event.key === ']' || event.key === '}') {playAudio(tone + 8 ,position_l + 1);}
				if (event.key === '\\'|| event.key === '|') {playAudio(tone + 10,position_l + 1);}
				
				if (event.key === '0') {playAudio(tone + shift_r + 12,position_r-1);}
				if (event.key === '1') {playAudio(tone + shift_r + 1 ,position_r+0);}
				if (event.key === '2') {playAudio(tone + shift_r + 3 ,position_r+0);}
				if (event.key === '3') {playAudio(tone + shift_r + 5 ,position_r+0);}
				if (event.key === '4') {playAudio(tone + shift_r + 6 ,position_r+0);}
				if (event.key === '5') {playAudio(tone + shift_r + 8 ,position_r+0);}
				if (event.key === '6') {playAudio(tone + shift_r + 10,position_r+0);}
				if (event.key === '7') {playAudio(tone + shift_r + 12,position_r+0);}
				if (event.key === '8') {playAudio(tone + shift_r + 1 ,position_r+1);}
				if (event.key === '9') {playAudio(tone + shift_r + 3 ,position_r+1);}
				if (event.key === '*') {playAudio(tone + shift_r + 5 ,position_r+1);}
			});
		});
		
		function display_() {
			const disp_element_l = document.getElementById("disp_position_l");
			disp_element_l.textContent = "Position Left  : " + position_l;
			const disp_element_r = document.getElementById("disp_position_r");
			disp_element_r.textContent = "Position Right : " + position_r;
			const disp_shift_r = document.getElementById("disp_shift_r");
			disp_shift_r.textContent = "Shift Right : " + shift_r;
			const disp_tone = document.getElementById("disp_tone");
			disp_tone.textContent = "Tone : " + tone;
		}
		
		var audioContext = new (window.AudioContext || window.webkitAudioContext)();
		// 变调函数，这里只是一个示例，可以根据需要进行更复杂的处理
		function playAudio(a,b) {
            var note = a+12*b-46;
		    var pitch = 220*(1.0594631**note);
		    
            var oscillator = audioContext.createOscillator();
		    //'sine'     正弦波
		    //'square'   方波
		    //'sawtooth' 锯齿波
		    //'triangle' 三角波  
		    //'custom'
		    oscillator.type = 'square';
		    oscillator.frequency.value = pitch; // 音调的频率

		    var gainNode = audioContext.createGain();
			oscillator.connect(gainNode);
			gainNode.gain.value = 0.02;
			gainNode.connect(audioContext.destination);
			oscillator.start();
			
			gainNode.gain.linearRampToValueAtTime(0.00, audioContext.currentTime + 0.5);
			//gainNode.gain.expRampToValue(0.00);
			
			oscillator.stop(audioContext.currentTime+1);
		}

        function getScreen() {
			var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			//alert("width:" + width);
		}

		</script>
	</body>
</html>